<template>
	<div class='dashboard-left'>
		<div
			class="home-logo"
			@click="$pushTo('Home')"
		>
			<el-image :src="LOGO" />
		</div>
		<!-- 个人信息 -->
		<header>
			<Avatar
				style="flex: 0 0 auto;"
				:src="storeGetter('getUserInfo').userInfo.avatarUrl"
				:size="50"
			/>
			<div class="info">
				<div class="nickname">{{storeGetter('getUserInfo').userInfo.nickname}}</div>
				<el-progress
					:percentage="userLevel.percent"
					:stroke-width="12"
					:format="()=>userLevel.label"
				/>
			</div>
		</header>
		<!-- 导航 -->
		<nav>
			<div
				class="navs"
				v-for="item in navs"
				:key="item.value"
			>
				<div
					class="navs-item"
					:class="{
						'active': route.name === nav.routeName
					}"
					v-for="nav in item.child"
					:key="nav.routeName"
					@click="nav.clickCb"
				>
					<Iconfont
						:name="nav.icon"
						size="1.4rem"
					/>
					<span>{{nav.label}}</span>
				</div>
			</div>
		</nav>
	</div>
</template>

<script setup lang="ts">
import { watch, defineEmits } from 'vue'
import { computed } from '@vue/reactivity'
import { useRoute } from 'vue-router'
import { storeGetter, storeCommit } from '@/utils/store'
import { USER_LEVEL } from '@/constants/user'
import { $confirm, $pushTo } from '@/utils/functions'
import { LOGO } from '@/constants/index'
import Iconfont from '@/components/Iconfont/index.vue'
import Avatar from '@/components/Avatar/index.vue'

const emit = defineEmits<{
  (e: 'changeTitle', title: string): void
}>()

/**
 * 计算用户等级
 */
const userLevel = computed(() => {
  const point = storeGetter('getUserInfo').ahaPoint
  /* 找到第一个比自己点数大的等级，取它的n-1作为等级，这个下标肯定会大于1， */
  const index = USER_LEVEL.findIndex(item => item.ahaPoint > point)

  if (index === -1) { // 溢出， 返回顶级
    return {
      percent: 100,
      label: USER_LEVEL[ USER_LEVEL.length - 1 ].label
    }
  }
  const currentLevel = USER_LEVEL[ index - 1 ]
  const nextLevel = USER_LEVEL[ index ]

  /*
		当前等级的aha点百分比情况：
		总aha点 = 下个等级的aha点起点 - 当前等级的aha点起点
		已有aha点 = 自己的aha点 - 当前等级aha点的起点
	*/
  return {
    percent: (point - currentLevel.ahaPoint) / (nextLevel.ahaPoint - currentLevel.ahaPoint) * 100,
    label: currentLevel.label
  }
})

const loginOut = () => {
  $confirm('确认退出登录?', () => {
    storeCommit('loginOut', '已退出登录')
  })
}

const navs = [
  {
    label: '资料',
    value: 'info',
    child: [
      { label: '基础信息', icon: 'icon-jibenxinxi', routeName: 'DashboardBasicInfo', clickCb: () => $pushTo('DashboardBasicInfo') },
    ],
  },
  {
    label: '项目',
    value: 'project',
    child: [
      { label: '我的竞赛项目', icon: 'icon-menu_jsdt', routeName: 'DashboardCompProject', clickCb: () => $pushTo('DashboardCompProject') },
      { label: '我的课程设计', icon: 'icon-keben', routeName: 'DashboardCourseDesign', clickCb: () => $pushTo('DashboardCourseDesign') },
    ]
  },
  {
    label: '其他',
    value: 'control',
    child: [
      { label: '退出登录', icon: 'icon-tuichu', routeName: 'Login', clickCb: loginOut },
    ]
  },
]

const route = useRoute()
watch(route, (val) => {
  let title = ''
  navs.find(nav => nav.child.find(item => {
    if (item.routeName === val.name) {
      title = item.label
      return true
    }
  }))

  emit('changeTitle', title)
}, { immediate: true })

</script>

<style lang="scss" scoped>
$headerHeight: 88px;

.dashboard-left {
  position: relative;
  height: 100%;
  user-select: none;
  background-color: #ffffff;

  .home-logo {
    position: absolute;
    bottom: 1%;
    left: 20px;
    width: 40px;
    cursor: pointer;
  }

  header {
    display: flex;
    align-items: center;
    height: $headerHeight;
    padding: 16px;
    border-bottom: $borderLight;

    .info {
      flex: 1;
      margin-left: 10px;

      .nickname {
        font-size: $sLarger;
        font-weight: bold;
      }

      .el-progress {
        width: 100%;

        /* 设置经验条文字大小 */
        :deep(span) {
          font-size: $sSmall;
        }
      }
    }
  }

  nav {
    padding: 8px;

    .navs {
      margin-bottom: 10px;
      border-bottom: $borderLight;

      &-item {
        display: flex;
        align-items: center;
        padding: 16px;
        margin-bottom: 5px;
        font-weight: bold;
        cursor: pointer;
        border-radius: $radiusMiddle;

        &.active,
        &:hover {
          background-color: rgba($color: #000000, $alpha: 0.04);
        }

        span {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
